<template>
  <div class="container">
    <div>
      <ImageVue v-bind="$attrs" :iconWord="iconWord"></ImageVue>
    </div>
    <div class="icon-style">
      <el-form>
        <el-form-item label="图标颜色">
          <ColorSelector></ColorSelector>
        </el-form-item>
        <el-form-item label="图标文字">
          <el-input v-model="iconWord"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button>保存</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import ImageVue from '../imag/ImageVue.vue'
import ColorSelector from '../radio/ColorSelector.vue'

const iconWord = ref('')
</script>

<style scoped>
.container {
  height: 100%;
  border: 1px dashed;
  padding: 5px;
}
.icon-style {
  padding: 5px;
  border: solid 1px var(--el-border-color);
}
</style>
